<template>
  <!-- 经纪人结佣-经纪公司佣金-成交详情-公司-->
  <div class="brokerDetail">
    <p>成交详情-经纪人</p>
    <el-form :inline="true">
      <span class="head-title">
        <span>{{detailInfo.cityName}}</span>
        <span>{{brealTypeMap[detailInfo.brokerType]}}</span>
        <span>{{detailInfo.companyName}}</span>
        <span>{{detailInfo.brokerName}}</span>
        <span
          v-show="detailInfo.strDate && detailInfo.endDate"
        >结佣时间：{{detailInfo.strDate}} 至 {{detailInfo.endDate}}</span>
      </span>
      <el-form-item label="客户：">
        <el-input
          v-model.trim="typeForm.customerNameOrPhone"
          autocomplete="off"
          placeholder="请输入姓名/手机号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    <tableList
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :tableChangeBtns="tableChangeBtns"
      :hasSera="true"
      :showSummary="true"
      :summaryMethod="summaryMethod"
    ></tableList>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils.js";
import tableList from "../../common/tableList";
export default {
  components: {
    tableList
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0,
      cityOption: [],
      typeForm: {
        customerNameOrPhone: ""
      },
      tableData: [],
      tableInfos: [
        { label: "客户姓名", prop: "customerName" },
        { label: "手机号", prop: "customerPhone" },
        { label: "房号", prop: "houseNum" },
        { label: "楼盘名称", prop: "devName" },
        { label: "结佣节点", prop: "nodeName" },
        { label: "时间", prop: "createTime" },
        { label: "成交价", prop: "dealAmount" },
        { label: "房款", prop: "devAmount" },
        { label: "应结佣金额", prop: "brokerageAmount" },
        { label: "分佣比例%", prop: "brokerageProportion" },
        { label: "经纪人应结佣金额", prop: "brokerageBrokerAmount" },
        { label: "前佣应结佣金额", prop: "frontAmount" },
        { label: "后佣应结佣金额", prop: "afterAmount" },
        { label: "税率", prop: "taxBrokerageRate" },
        { label: "税费", prop: "brokerageTaxation" },
        { label: "应付款金额", prop: "brokeragePayAmount" },
        { label: "佣金套餐", prop: "changeBtn" }
      ],
      tableChangeBtns: [{ label: "查看详情", type: "view", fn: this.view }],
      brealTypeMap: { "0": "网络推客", "3": "职业经纪人", "5": "经纪公司" },
      totalRows: {},
      detailInfo: {}
    };
  },
  created() {
    this.detailInfo = this.$route.query;
    this.searchList();
  },
  mounted() {},
  methods: {
    tableFormatter(prop, val) {
      let moneyFormatter = [
        "dealAmount",
        "devAmount",
        "brokerageAmount",
        "brokerageBrokerAmount",
        "frontAmount",
        "afterAmount",
        "brokerageTaxation",
        "brokeragePayAmount"
      ];
      if (moneyFormatter.includes(prop)) {
        return !val ? "0.00" : utils.formatMoney(val);
      }
      if (prop === "customerPhone") {
        return utils.formatPhoneNumber(val);
      }
      if (prop === "createTime") {
        return utils.getTimeString(val);
      }
      if (["brokerageProportion", "taxBrokerageRate"].includes(prop)) {
        if (!val && val !== 0) {
          return "——";
        } else {
          return val + "%";
        }
      }
      if (prop === "brokerageProportion") {
        if (!val && val !== 0) {
          return "——";
        }
      }
      return val;
    },
    summaryMethod() {
      return this.totalRows;
    },
    searchList(pageNum) {
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        ...this.detailInfo,
        ...this.typeForm
      };
      this.axios.post(api.getBrokerBrokerageDetail, param).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.rows;
          this.totalRows = res.data.data.totalRows || {};
          this.totalSize = res.data.data.total;
        }
      });
    },

    //成交详情
    view(type, idx, row) {
      let id = row.customerFollowId;
      if (id) {
        window.open(`${api.viewCommInfo}customerFollowId=${id}`, true);
      }
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    }
  },
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.head-title {
  line-height: 40px;
  font-size: 14px;

  >span {
    margin-right: 40px;
  }
}
</style>
